<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="我的产品"></u-navbar> -->
		<!-- Tab navigation -->
		<view class="fixed-top bg-white">

			<view class="px-2 mt-2 pb-2 dfes">
				<!-- <i class="iconfont icon-jia text-8ED0F2 mr-2" @click="open('tabbar/user/productAddition')"></i> -->
				<u-button  class="mr-2 text-white bg-8ED0F2"  size="mini"
								shape="circle" @click="open('tabbar/user/productAddition')">新增</u-button>
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" @input="search" :action-style="actionStyle"></u-search>
			</view>
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index"
					@click="changeTab(index,item.productStatus)" :key="index">
					<view class="font-md" :class="tabIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class="p-2" style="margin-top: 100px;">
			<swiper :current="tabIndex" @change="onChangeTab" style="height: 100vh;">
				<swiper-item v-for="(_,inx) in tabBars" :key="inx">
					<scroll-view scroll-y style="height: calc(100vh - 0px);" :show-scrollbar="false"
						@scrolltolower="loadMore" @scrolltoupper="refresh">
						<view v-for="(item, index) in newlist" :key="index" class="pb-2  content-item">
							<view class="show-dd pl-2 bg-white pt-2">
								<view class="dfes">
									<view class="font-14 text-333333 font-weight-bold">{{item.productName}}
									</view>
									<view class="position-absolute text-FFC251 font-14" style="right: 10px;">
										<u-switch active-value="1" inactive-value="0" size="40" active-color="#FFC251"
											inactive-color="#eee" v-model="item.productStatus" :loading="loading"
											@change="toggleSwitch(item)"></u-switch>
									</view>
								</view>
								<view class="lineHight mt-2">
									<view>产品品类：{{item.productTypeName}}</view>
									<view class="wrapl">基地名称：{{item.baseName}}</view>
									<view>联系人：{{item.baseContacts}}</view>
								</view>
								<view class="lineHight-3 text-right">
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle" @click="productDetails(item.id)">查看</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle" @click="productEditing(item.id)">编辑</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle" @click="deleteMy(item.id)">删除</u-button>

								</view>
							</view>

						</view>
						<view v-if="!hasMore && newlist.length > 0" class="text-center mt-3 mb-3">
							<view class="text-muted">没有更多数据了</view>
						</view>
						<view v-else-if="!hasMore && newlist.length === 0" class="text-center mt-3 mb-3">
							<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
							<view class="text-999999 font-15">暂无数据</view>
						</view>
						<view v-else class="text-center mt-3 mb-3">
							<view class="btn btn-primary">加载更多</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				tabBars: [{
						"id": 1,
						"name": "全部产品",
						"productStatus": null,
					},
					{
						"id": 2,
						"name": "已下架",
						"productStatus": 0
					},
					{
						"id": 3,
						"name": "已上架",
						"productStatus": 1
					},

				],
				form: {
					id: "",
					productStatus: 0
				},
				scrollinto: "",
				tabIndex: 0,
				checked: true,
				actionStyle: {
					color: '#8ED0F2'
				},
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				hasMore: true, 
				keyword: '',
				searchResults: [], 
				isSearching: false,
				productStatus: '',
				newlist: [],
				controlStatus: false,
				loading: false,
			};
		},
		onShow() {
			this.NewList();
			this.newlist = []
		},
		onLoad() {
			// this.NewList()
		},
		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					// 如果关键字为空，则显示原始数据
					this.isSearching = false;
					return;
				}
				this.setDefaultPageConfig()
				this.newlist = []
				this.NewList()
			},

			NewList() {
				$H.get('/agriculture/productInform/agriculture/PushInformList', {
					productStatus: this.productStatus,
					...this.form,
					productName: this.keyword.trim(),
				}, {}).then(res => {
					this.newlist = [...this.newlist, ...res.result.records].map(v => {
						v.productStatus = v.productStatus === '1'
						return v
					})
					this.total = res.result.total;
					this.hasMore = this.newlist.length < this.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			changeTab(index, productStatus) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tabBars" + index;
				this.productStatus = productStatus;
				this.newlist = [];
				this.setDefaultPageConfig()
				this.NewList(this.productStatus);
			},
			onChangeTab({
				detail
			}) {
				const productStatus = this.tabBars[detail.current].productStatus
				this.changeTab(detail.current, productStatus);
			},
			// 加载更多
			loadMore() {
				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},

			deleteMy(id) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.del(
								`/agriculture/productInform/agriculture/delete?id=${id}`, {}, {
									token: true
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.NewList();
									_this.newlist = [];
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},

			productDetails(id) {
				uni.navigateTo({
					url: `/pages/tabbar/user/productDetails?id=${id}`
				})
			},
			productEditing(id) {
				uni.navigateTo({
					url: `/pages/tabbar/user/productEditing?id=${id}`
				})
			},

			toggleSwitch(item) {
				this.sendRequest(item);

			},
			// productStatus   等于1就取反0   // productStatus   等于0就取反1  
			sendRequest({
				id,
				productStatus
			}) {
				let o = {
					id: id,
					productStatus: productStatus ? '1' : '0'
				};
				$H.post('/agriculture/productInform/productStatus', o, {})
					.then(res => {
						if (res.code === 200) {
							// 更新开关状态
							this.newlist = []
							this.NewList()

							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					})
					.catch(error => {
						uni.showToast({
							title: res.error,
							icon: 'none',
						});
					});
			}

		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 32px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>